<template>
	<view class="container">
		<u-sticky>
			<view class="tabs">
				<view :class="['tabs-item', { current: current == 0 }]" @click="toggle(0)">全部订单({{ state.all }})</view>
				<view :class="['tabs-item', { current: current == 1 }]" @click="toggle(1)">处理中({{ state.yi }})</view>
				<view :class="['tabs-item', { current: current == 2 }]" @click="toggle(2)">已完成({{ state.wan }})</view>
			</view>
		</u-sticky>
		<view class="layout" v-if="state.list.length">
			<view class="list">
				<view class="list-box" v-for="(item, index) in state.list" :key="index">
					<view class="info" @click="gotoPages(item.id)">
						<image :src="item.goods?.goods_thumb" class="pic"></image>
						<view class="msg">
							<view class="title">{{ item.goods?.goods_title }}</view>
							<view class="content">{{ item.goods?.goods_sku_name }}</view>
							<view class="flexjus">
								<view class="time">{{ item.created_at }}</view>
								<view class="status">{{ item.status_text }}</view>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="btn-group-right">
							<!-- type: 1=>退货退款，2=>换货 -->
							<!-- status：售后状态 1待处理 2已同意 3已退款 4寄回中 5已完成 -->
							<block v-if="item.type == 1">
								<block v-if="item.status == 1">
									<view class="btn" @click="tongyishenqing(item.order_id)">同意申请</view>
								</block>
							</block>
							<block v-if="item.type == 2">
								<block v-if="item.status == 1">
									<view class="btn" @click="xianxiahuanhuo(item.order_id)">线下换货</view>
								</block>
								<block v-if="item.status != 1">
									<view class="btn" @click="pingtaishouhou(item.order_id)">平台售后</view>
								</block>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" style="height: 80%" v-else>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-container">
				<view class="popup-title">请确认是否同意此订单的申请？</view>
				<view class="btn-group">
					<view class="btn cancel" @click="cancel">取消</view>
					<view class="btn confirm" @click="confirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { get, post } from '@/request/index.js';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

const state = reactive({
	id: '',
	all: 0,
	yi: 0,
	wan: 0,
	list: [],
	page: 1,
	totalPage: 1
});
let current = ref(0);
const toggle = (n) => {
	current.value = n;
	state.page = 1;
	getListData();
};
onLoad(() => {
	getListData();
});
onReachBottom(() => {
	state.page++;
	if (state.page > state.totalPage) return uni.showToast({ title: '我也是有底线的 ~' });
	getListData();
});
//获取数据
const getListData = async () => {
	uni.showLoading({
		title: '数据请求中···'
	});
	const res = await get('agent/order/list', { tab: current.value, page: state.page });
	const { code, data } = res;
	if (code == 200) {
		state.all = data.all;
		state.yi = data.yi;
		state.wan = data.wan;
		state.totalPage = data.list.last_page;
		data.list.data.map((item) => {
			if (item.type == 1) {
				if (item.status == 1) {
					item.status_text = '售后等待同意';
				} else if (item.status == 2) {
					item.status_text = '售后已同意';
				} else if (item.status == 3) {
					item.status_text = '售后已退款';
				} else if (item.status == 4) {
					item.status_text = '售后寄回中';
				} else if (item.status == 5) {
					item.status_text = '售后已完成';
				}
			} else {
				if (item.status == 1) {
					item.status_text = '平台售后等待同意';
				} else if (item.status == 2) {
					item.status_text = '平台售后已同意';
				} else if (item.status == 3) {
					item.status_text = '平台售后已退款';
				} else if (item.status == 4) {
					item.status_text = '平台售后寄回中';
				} else if (item.status == 5) {
					item.status_text = '平台售后已完成';
				}
			}
		});
		if (state.page == 1) {
			state.list = data.list.data;
		} else {
			state.list = [...state.list, ...data.list.data];
		}
	}
	uni.hideLoading();
};
//售后详情
const gotoPages = (id) => {
	uni.navigateTo({
		url: `/pages/orderDetail/orderDetail?id=${id}`
	});
};
//同意申请
const popup = ref();
const tongyishenqing = async (id) => {
	popup.value.open();
	state.id = id;
};

const confirm = async () => {
	const res = await post('agent/order/sure_apply', { id: state.id });
	const { code, message } = res;
	if (code == 200) {
		uni.showToast({
			title: message
		});
		getListData();
		// setTimeout(() => {
		// 	uni.navigateTo({
		// 		url: `/pages/orderDetail/orderDetail?order_id=${state.id}`
		// 	});
		// }, 2000);
	}
};

const cancel = () => {
	popup.value.close();
	state.id = '';
};

//线下换货
const xianxiahuanhuo = (id) => {
	uni.navigateTo({
		url: `/pages/xianxiahuanhuo/xianxiahuanhuo?order_id=${id}`
	});
};
//平台售后
const pingtaishouhou = () => {
	uni.navigateTo({
		url: `/pages/pingtaishouhou/pingtaishouhou?order_id=${id}`
	});
};
</script>

<style scoped lang="scss">
.tabs {
	padding: 0 32rpx;
	&-item {
		margin-right: 0;
	}
}
</style>
